<template>
  <div class="template-div-Lu">
    <a-modal
      title=""
      :visible="childFormFormVisible"
      :maskClosable="false"
      :closable="true"
      :destroyOnClose="true"
      width="100%"
      :dialog-style="{ margin: '0 auto' }"
      wrapClassName="full-modal-Lu"
      @cancel="closeVisible">
      <template slot="footer" style="text-align:center;">
        <a-button @click="closeVisible">关闭</a-button>
      </template>
      <!-- <template slot="operation" slot-scope="text, record">
        <a href="javascript:;">编辑</a>
        <a href="javascript:;">添加下级</a>
        <a-popconfirm
          v-if="dataSource.length"
          title="确定要删除这条记录吗?"
          @confirm="() => onDelete(record)"
        >
          <a href="javascript:;">删除</a>
        </a-popconfirm>
      </template> -->
      <a-tabs type="card">
        <a-tab-pane key="1" tab="节点管理表">
          <vxe-toolbar v-if="tableData.length == 0">
            <template #buttons>
              <vxe-button @click="addGjd" class="blue-btn">添加</vxe-button>
            </template>
          </vxe-toolbar>
          <vxe-table
            show-overflow
            keep-source
            ref="tableRef"
            :row-config="{keyField: 'id'}"
            :column-config="{resizable: true}"
            :print-config="{}"
            :export-config="{}"
            :loading="loading"
            :tree-config="{transform: true, rowField: 'id', parentField: 'fsyhjid',expandAll: true}"
            :edit-config="{trigger: 'click', mode: 'row', showStatus: true}"
            :expand-config="{reserve: true}"
            :data="tableData">
            <vxe-column type="checkbox" width="60"></vxe-column>
            <vxe-column field="fjdmc" title="节点名称" tree-node width='30%'></vxe-column>
            <vxe-column field="fymid" title="路径ID"></vxe-column>
            <vxe-column field="fxh" title="序号" width="100"></vxe-column>
            <vxe-column field="fblfs" title="办理方式"></vxe-column>
            <vxe-column field="fblbmlx" title="办理部门类型"></vxe-column>
            <vxe-column title="操作" width="300">
              <template #default="{ row }">
                  <a-form layout="inline" >
                    <a-form-item>
                        <a-button class="blue-btn" type="primary" @click="addNextType(row)">新增下级</a-button>
                    </a-form-item>

                    <a-form-item>
                        <a-button class="blue-btn" type="primary" @click="editType(row)" >编辑</a-button>
                    </a-form-item>

                    <a-form-item >
                        <a-button class="red-btn" type="primary" @click="delType(row)" >删除</a-button>
                    </a-form-item>
                  </a-form>
              </template>
            </vxe-column>
          </vxe-table>
        </a-tab-pane>
      </a-tabs>
    </a-modal>
    <increase ref="refModel" :addEditParameter="addEditParameter" @handleOk="handleOk"/>
  </div>
</template>
<script>
import PermissionList from '../system/PermissionList'
import increase from './increase.vue'
import {addfirstnode,jdList,deleteJd,} from './service/index'
export default {
  components: {
    PermissionList,
    increase
  },
  props: {
    childData:{
      type:[Array,Object],
      default: () => {},
      required: false
    },
  },
  data() {
    return {
      childFormFormVisible: false,
      data: [],
      loading: false,
      tableData: [],
      addEditParameter: {},

    }
  },
  mounted() {
    // this.getList()
  },
  // activated() {
  //   this.getList()

  // },
  methods: {
    closeVisible(){
      this.childFormFormVisible = false
    },
    addGjd(){
      // //console.log(this.childData)
      addfirstnode({mbId:this.childData.id}).then(res => {
        if (res.code == 200) {
          this.$message.success(res.message);
          this.getList()
        } else {
          this.$message.error(res.message);
        }
      })
    },
    getList(){
      this.loading = true;
      jdList({mbId:this.childData.id}).then(res => {
        this.tableData = res.result
        this.loading = false;
        // 持续展开所有，与expandAll: true配合使用
        this.$nextTick(() => this.$refs.tableRef.setAllTreeExpand(true));
      })
    },
    // 弹框ok
    handleOk(val,id){
      if(val && !id){
          this.getList(); // 刷新
      }else if(val && id){
          this.getList(); // 刷新
      }
    },
    // 新增下级
    addNextType (row) {
      this.addEditParameter = {
        fsyhjid: row.id,
        flcmbid: row.flcmbid
      }
      this.$refs.refModel.visibleShow = true
    },
    // 编辑
    editType (row) {
      this.addEditParameter = {
          ...row
      }
      this.$refs.refModel.visibleShow = true
    },
    // 删除
    delType (row) {
      var that = this
      this.$confirm({
          title:'您确认要删除['+row.fjdmc+']吗？',
          onOk() {
            deleteJd({id: row.id}).then(res => {
                  if (res.code == 200) {
                      that.$message.success(res.message);
                  } else {
                      that.$message.error(res.message);
                  }
                  that.getList(); // 刷新
              })
          }
      })
    },
  },
  watch:{
    childData(newval,oldVal){
      //console.log(newval,oldVal)
      //console.log(this.childData)
      this.getList()
    }
  },
}
</script>
<!-- <style src="../administrativeOffice/css/oaLess.css">
</style>
<style scoped src="../administrativeOffice/css/index0.css">
</style> -->
<style>
@import url('../../../src/views/administrativeOffice-new/css/oaLess.css');
/* @import url('../../../src/views/administrativeOffice-new/css/oaClass.css'); */
</style>
